<template>
  <div>
    <h1>App</h1>

    <hr />

    <input v-model="table1Value" />
    <MyTable
      :columns="table1.columns"
      :rows="table1.rows"
      defaultSortKey="age"
      defaultSortOrder="dsc"
      :filterKey="table1Value"
    />

    <hr />

    <input type="text" v-model="table2Value" />
    <MyTable
      :filterKey="table2Value"
      :columns="table2.columns"
      :rows="table2.rows"
    />
  </div>
</template>

<script>
import MyTable from "./components/MyTable.vue";

export default {
  components: {
    MyTable,
  },

  data() {
    return {
      table1Value: "",
      table2Value: "",

      table1: {
        columns: [
          {
            title: "姓名",
            field: "name",
            sort: true,
          },
          {
            title: "年龄",
            field: "age",
            sort: true,
          },
        ],

        rows: [
          {
            name: "张三",
            age: 18,
          },
          {
            name: "里斯",
            age: 20,
          },
          {
            name: "王五",
            age: 19,
          },
        ],
      },

      table2: {
        columns: [
          { title: "书名", field: "bookName" },
          { title: "作者名", field: "authorName" },
          { title: "出版日期", field: "publishDate", sort: true },
        ],

        rows: [
          {
            bookName: "西游记",
            authorName: "吴承恩",
            publishDate: "1980-09-10",
          },
          {
            bookName: "红楼梦",
            authorName: "曹雪芹",
            publishDate: "1981-09-10",
          },
          {
            bookName: "三国演义",
            authorName: "罗贯中",
            publishDate: "1982-09-10",
          },
        ],
      },
    };
  },
};
</script>
